<template>
  <div class="ip-page">
    <div class="ip-box">
      <div>
        <el-row>
          <el-col :span="8">
            <span class="search-tip">访问日期：</span>
            <el-date-picker
              v-model="searchDateVal"
              type="daterange"
              value-format="yyyy-MM-dd"
              size="small"
              range-separator="至"
              start-placeholder="起始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-col>
          <el-col :span="8">
            <span class="search-tip">访问IP：</span>
            <el-input size="small" v-model="searchIpVal" placeholder="输入IP地址" clearable></el-input>
          </el-col>
          <el-col :span="8">
            <span class="search-tip"></span>
            <div class="flex">
              <el-button
                style="display:block;margin-left:25px;height:32px;"
                type="primary"
                @click="onSearch"
                size="small"
              >查询</el-button>
              <el-button
                style="display:block;margin-left:10px;height:32px;"
                plain
                @click="onClear"
                size="small"
              >清空</el-button>
            </div>
          </el-col>
        </el-row>
        <div class="ip-count">
          <span>数量统计: </span>
          <span>{{ total }}</span>
        </div>
        <el-table
          v-show="tableData.length > -1"
          :data="tableData"
          empty-text="暂无数据"
          v-loading="tableLoading"
          :header-cell-style="{background:'rgb(240,240,240)',color:'#606266'}"
        >
          <el-table-column type="index" width="60" label="序号" align="center" />
          <el-table-column align="center" prop="create_time" label="访问时间" />
          <el-table-column align="center" prop="ip_address" label="访问IP" />
        </el-table>
        <div class="ip-foot">
          <custom-page ref="customPage" :total="total" @getList="getIPListFun" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import customPage from '@/components/customPage'
import { getIpList } from '@/api/others'
export default {
  components: { customPage },
  data() {
    return {
      tableData: [],
      searchDateVal: '',
      searchIpVal: '',
      total: 0,
      dateDetail: [],
      ipDetail: [],
      tableLoading: false
    }
  },
  mounted() {
    this.getIPListFun(true)
  },
  methods: {
    getIPListFun(init=false) {
      this.tableLoading = true
      const { page, pageSize } = this.$refs.customPage
      let params = {
        page,
        pageSize
      }
      if(!init) {
        let temp = this.returnSearchParam()
        params = { ...params, ...temp }
      }
      getIpList(params).then((res) => {
        let { date_detail, ip_detail } = res
        this.dateDetail = date_detail
        this.tableData = ip_detail.data
        this.total = ip_detail.total
      }).finally(()=>{
        this.tableLoading = false
      })
    },
    onSearch() {
      this.tableLoading = true
      let params = this.returnSearchParam()
      this.$refs.customPage.page = 1
      const { page, pageSize } = this.$refs.customPage
      // 发送查询请求
      getIpList({
        page,
        pageSize,
        ...params
      }).then((res) => {
        let { date_detail, ip_detail } = res
        this.dateDetail = date_detail
        this.tableData = ip_detail.data
        this.total = ip_detail.total
      }).finally(()=>{
        this.tableLoading = false
      })
    },
    returnSearchParam(){
      let tempDateRange = ""
      if(this.searchDateVal && Array.isArray(this.searchDateVal)) {
        tempDateRange = this.searchDateVal.join('~')
      }
      let params = {
        date_detail: tempDateRange,
        ip_address: this.searchIpVal ? this.searchIpVal : "" 
      }
      return params
    },
    onClear(){
      this.searchDateVal = ""
      this.searchIpVal = "" 
    }
  },
}
</script>

<style scoped>
.ip-page {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 20px 0;
  background-image: url('../../assets/images/home_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.ip-box {
  width: 70%;
  margin: 0 auto;
  box-shadow: 0 0 4px #cfcfcf;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  padding: 15px 25px;
  border-radius: 8px;
}
.ip-row {
  display: flex;
  margin: 4px 0;
  column-gap: 14px;
}
.ip-count {
  margin: 10px 0;
}
.ip-foot {
  text-align: right;
  margin-top: 10px;
}
.search-tip {
  display: block;
  height: 24px;
}
</style>